<template>
  <view class="new_main">
    <view class="header">
      <!-- 顶部背景图 -->
      <image
        class="topImage"
        src="/static/img/my/homeCenter/myHome_bj.png"
        mode="widthFix"
      />
      <u-icon
        class="arrow_left"
        name="arrow-left"
        size="24"
        color="#fff"
        @click="goBack()"
      ></u-icon>
    </view>
    <view class="content">
      <view class="flex_between" style="position: relative">
        <view class="avatar">
          <image :src="info.avatar" class="img100" mode="aspectFill"></image>
        </view>
        <view
          class="editBox"
          :class="{ cancelBtn: is_focus == 1 }"
          @click="gzFun"
        >
          {{ is_focus == 1 ? "取消关注" : "+关注" }}
        </view>
      </view>
      <view class="title">
        <text class="name">{{ info.nickname }}</text>
        <view class="level">Lv{{ info.level }}</view>
      </view>
      <view class="approve">
        <view class="approveImg">
          <image
            :src="
              info.is_major == 0
                ? '/static/img/my/homeCenter/V_0.png'
                : '/static/img/my/homeCenter/V_1.png'
            "
            mode="widthFix"
            class="img100"
            style="display: block; margin: 0; padding: 0"
          ></image>
        </view>
        <view class="fz26 c999">{{
          info.is_major == 0 ? "未认证" : majorTypes
        }}</view>
      </view>
      <view class="text">{{ info.bio }}</view>
      <view class="user_num">
        <view class="kind_num">
          <text class="num_txt">{{ info.likes }}</text
          >赞
        </view>

        <navigator
          hover-class="none"
          class="kind_num"
          :url="`/pages/my/homeCenter/fans?id=${id}&type=${2}`"
        >
          <text class="num_txt">{{ info.fans }}</text
          >粉丝
        </navigator>

        <navigator
          hover-class="none"
          class="kind_num"
          :url="`/pages/my/homeCenter/fans?id=${id}&type=${1}`"
        >
          <text class="num_txt">{{ info.focus }}</text
          >关注
        </navigator>
      </view>
    </view>
    <view class="askInfo" v-if="info.is_major == 1">
      <view class="askTitle">回答（{{ answer.list.length }}）</view>
      <view
        class="answerList"
        v-for="(item, index) in answer.list"
        :key="index"
        hover-class="none"
      >
        <view class="flex">
          <view class="answerAvatar">
            <image
              class="img100"
              :src="item.quiz_avatar"
              mode="aspectFill"
              @click="toHome(item)"
            >
            </image>
          </view>
          <view class="infoBox">
            <text class="item_name">{{ item.quiz_username }}</text>
            <text class="item_time">{{ item.quiz_createtime }}发起提问</text>
          </view>
        </view>
        <view @click="goCheck(item)">
          <view class="quiz_title">
            {{ item.quiz_title }}
          </view>
          <view class="taAnswer">
            <span class="answer_title">Ta的回答</span><br />
            <text class="ellipsis2">{{ item.content }}</text>
          </view>
        </view>
      </view>
      <view v-if="answer.list.length == 0">
        <u-empty
          marginTop="100"
          text="暂无数据"
          icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
        ></u-empty>
      </view>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homeCenter/taHome"
></script>

<style lang="scss" scoped>
.quiz_title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 32rpx;
  font-weight: 800;
  color: #333333;
  margin-top: 30rpx;
}

page {
  background-color: #f6f6f6 !important;
}

.arrow_left {
  position: absolute;
  top: var(--status-bar-height);
  left: 32rpx;
  z-index: 999999;
}

.topImage {
  width: 100%;
}

.approve {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  align-items: center;
}

.approveImg {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.content {
  border-radius: 25rpx !important;
  padding: 0 40rpx;
  width: 100%;
  background-color: #fff;
}

.avatar {
  border: 10rpx solid #fff;
  border-radius: 100rpx;
  height: 200rpx;
  width: 200rpx;
  overflow: hidden;
  margin-top: -100rpx;
}

.editBox {
  margin-top: 30rpx;
  text-align: center;
  width: 148rpx;
  height: 62rpx;
  line-height: 62rpx;
  background: #fb840e;
  border-radius: 82rpx;
  color: #fff;
  font-size: 28rpx;
}

.cancelBtn {
  text-align: center;
  height: 62rpx;
  line-height: 62rpx;
  background: #f3f3f3;
  border-radius: 82rpx;
  color: #a9a9a9;
  font-size: 28rpx;
}

.title {
  display: flex;
  margin-top: 20rpx;
  align-items: center;
}

.name {
  margin-right: 20rpx;
  font-weight: 700;
  font-size: 50rpx;
  color: #333333;
}

.level {
  text-align: center;
  width: 83rpx;
  height: 30rpx;
  line-height: 30rpx;
  background: #c5d1f6;
  border-radius: 112rpx;
  font-size: 22rpx;
  color: #ffffff;
}

.img {
  width: 34rpx;
  height: 34rpx;
}

.text {
  margin-top: 20rpx;
  font-size: 25rpx;
  color: #999999;
}

.user_num {
  height: 80rpx;
  display: flex;

  .kind_num {
    font-size: 26rpx;
    color: #999999;
    margin-right: 50rpx;
    .num_txt {
      font-size: 40rpx;
      margin-right: 10rpx;
      color: #6d91ff;
    }
  }
}

.item {
  font-size: 32rpx;
  color: #666666;
  margin-right: 80rpx;
}

.askInfo {
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #fff;
  .askTitle {
    font-size: 36rpx;
    color: #333333;
  }
}

.answerAvatar {
  margin-right: 20rpx;
  width: 65rpx;
  height: 65rpx;
  border-radius: 50%;
  overflow: hidden;

  image {
    border-radius: 50%;
  }
}

.answerList {
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #d8d8d8;
  margin-top: 60rpx;
}

.answerList:last-child {
  border-bottom: none;
}

.taAnswer {
  padding: 30rpx;
  margin: 0 auto;
  width: 680rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #999999;
  margin-top: 20rpx;

  .answer_title {
    color: #6d91ff;
    font-size: 22rpx;
  }
}

.infoBox {
  display: flex;
  flex-direction: column;
  .item_name {
    font-size: 28rpx;
    color: #333333;
  }
  .item_time {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
